<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script language="javascript" src="scripts/jquery-1.3.2.js" type="application/javascript"></script>
<script language="javascript" type="application/javascript">

$(document).ready(function(){
fillCheckboc();
$("#ddbox").hide();
$("#dd").click(function(){
$("#ddbox").toggle();
});

$("#ddbox input[type=checkbox]").click(function(){
if($(this).is(":checked"))
$("#dd").val($("#dd").val() + $(this).val() + ", ");
else
$("#dd").val($("#dd").val().replace($(this).val() + ", ",""));
});

$("#cc").click(function(){
getSelectedCheckbox();
});

});

function fillCheckboc(){
for(i=0;i<5;i++)
{
$("#ddbox").append($("<label><input id=chk" + i + " value=chk" + i +" type='checkbox' /> chk" + i + "</label><br/>"));
}
}

function getSelectedCheckbox(){
$("#ddbox :checked").each(function() {  
 alert("value = " + $(this).val());  
   
});  
}
</script>
<style type="text/css">

.box{
	background-color: #FFFFFF;
	width: 200px;
	border: 1px solid #666666;
	left: 10px;
	top: 0px;
	position: relative;
}
</style>
</head>

<body>
<div class="inputform1">
<div class="inputformtitle bigboldbluetext">Title of the Thing</div>
<table class="inputtable1">
<tr><td>Username</td><td>:</td><td><input type="text" id="username" /></td></tr>
<tr><td>Password</td><td>:</td><td><input type="text" id="username" /></td></tr>
<tr><td>Email</td><td>:</td><td><input type="text" id="username" /></td></tr>
<tr><td></td><td></td><td><div class="buttons"><a href="#" >Save</a><a href="#" >Cancel</a></div></td></tr>
</table>
</div>
<input type="text" id="cc"/>
<div>
<input type="text" id="dd"/><div id="ddbox" class="box"></div>
</div>
</body>
</html>
